<template>
  <div>
   <a-row type="flex">
      <a-col :span="6" :order="1">
        <div :style="{height: '300px',background:'#f6c065'}">
              内容1
        </div>
      </a-col>
      <a-col :span="6" :order="2">
         <div :style="{height: '300px',background:'#ffc1b6'}">
              内容2
        </div>
      </a-col>
      <a-col :span="6" :order="3">
         <div :style="{height: '300px',background:'#ff577f'}">
              内容3
        </div>
      </a-col>
      <a-col :span="6" :order="4">
        <div :style="{height: '300px',background:'#e9b0df'}">
              内容4
        </div>
      </a-col>
       <a-col :span="12" :order="5">
         <div id="chart1" :style="{height: '300px'}">
              内容3
        </div>
      </a-col>
      <a-col :span="12" :order="6">
        <div id="chart2" :style="{height: '300px'}">
              内容4
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const echarts = require('echarts')

export default {
  mounted () {
    this.initChart1()
    this.initChart2()
  },
  methods: {
    initChart1 () {
      const myChart = echarts.init(document.getElementById('chart1'))
      myChart.setOption({
        title: {
          text: 'xxx2021销售数据'
        },
        color: ['#ffcc29', '#fad586'],
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        legend: {}, // 图例
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '销售额',
            type: 'line',
            data: [225, 200, 136, 101, 110, 220]
          }
        ]
      })
    },
    initChart2 () {
      const xData = (function () {
        var data = []
        for (var i = 1; i < 31; i++) {
          data.push(i + '日')
        }
        return data
      }())
      const myChart = echarts.init(document.getElementById('chart2'))
      myChart.setOption(
        {
          // backgroundColor: "#cdfffc",

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }

            }
          },
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            x: '46%',
            top: '11%',
            textStyle: {
              color: '#90979c'
            },
            data: ['访问量', '订单量']
          },

          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color: 'rgba(204,187,225,1)'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: xData
          }],

          yAxis: [{
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(204,187,225,0.5)'
              }
            }

          }],
          dataZoom: [{
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,

            start: 10,
            end: 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#5B3AAE'
            },
            textStyle: {
              color: 'rgba(204,187,225,0.5)'
            },
            fillerColor: 'rgba(67,55,160,0.4)',
            borderColor: 'rgba(204,187,225,0.5)'

          }, {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series: [{
            name: '访问量',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              color: '#6f7de3'
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              data: [{
                type: 'max',
                name: '最大值'

              }, {
                type: 'min',
                name: '最小值'
              }]
            },
            data: [
              509, 917, 2455, 2610, 2719, 3033, 3044, 3085, 2708, 2809, 2117, 2000, 1455, 1210, 719,
              733, 944, 2285, 2208, 3372, 3936, 3693, 2962, 2810, 3519, 2455, 2610, 2719, 2484, 2078
            ]
          }, {
            name: '订单量',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              color: '#c257F6'
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              data: [{
                type: 'max',
                name: '最大值'

              }, {
                type: 'min',
                name: '最小值'
              }]
            },
            data: [
              2136, 3693, 2962, 3810, 3519, 3484, 3915, 3823, 3455, 4310, 4019, 3433, 3544, 3885, 4208, 3372,
              3484, 3915, 3748, 3675, 4009, 4433, 3544, 3285, 4208, 3372, 3484, 3915, 3823, 4265, 4298
            ]
          }]
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
